<!DOCTYPE html><html lang="ja"><head><meta charset="utf-8" />
<title>Mass Effect Demo. Tile Transition</title>
<style>
.move { position: absolute; opacity: 0; background-color: gray;
        width: 50px; height: 50px; }
</style>
</head><body>

<input type="button" value="kill" onclick="kill()" />

<script src="../../src/base.js"></script>
<script>
function kill() {
    Math.easing.kill(killID);
}
var cols, rows, time, nodes = []; // nodes = [[],[],[],[],[]]
var killID = 0;

cols = parseInt(window.prompt("tile columns", 30) || 30);
rows = parseInt(window.prompt("tile rows",    10) || 10);
time = parseInt(window.prompt("transition duration (msec)", 1000) || 1000);

function makeMassEffectParam() { // @lookup: cols, rows, time
    var param = { _time: time },
        x = 0, y = 0, id;

    for (; y < rows; ++y) {
        for (x = 0; x < cols; ++x) {
            id = y + "_" + x; // "yy_xx"

            param["rect" + id] = {
                a: [ x      * 50 + 100,  y      * 50 + 100, 50], // [left, top, width]
                b: [(x + 1) * 50 + 200, (y + 1) * 50 + 200,  0], // [left, top, width]
                d: x * 50 + 100,
                i: 1
            };
            param["a" + id] = { a:  2, b: 1, d: x * 50 + 100 }; // opacity 2 -> 1

        }
    }
    return param;
}

function stateCallback(build, param) {
    if (build) {
        initDOMandCSS();
    }
}

function tickCallback(result, elapsedTime, param) { // @lookup: cols, rows, nodes
    var x = 0, y = 0, id;

    for (; y < rows; ++y) {
        for (x = 0; x < cols; ++x) {
            id = y + "_" + x; // "yy_xx"

            if (result["rect" + id]) {
                nodes[y][x].style.left    = result["rect" + id][0] + "px";
                nodes[y][x].style.top     = result["rect" + id][1] + "px";
                nodes[y][x].style.width   = result["rect" + id][2] + "px";
                nodes[y][x].style.height  = result["rect" + id][2] + "px";
            }

            if (result["a" + id]) {
                nodes[y][x].style.opacity = result["a" + id] - 1; // opacity - 1
            }
        }
    }
}

killID = mm.anime(makeMassEffectParam(), tickCallback, stateCallback);


function initDOMandCSS() { // @lookup: cols, rows, nodes
    var x = 0, y = 0, id, node, ruls,
        styleSheetNode, styleSheet, rules = 0;

    // --- creat StyleSheet ---
    styleSheetNode = document.createElement("style");
    styleSheetNode.appendChild(document.createTextNode(" "));
    document.getElementsByTagName("head")[0].appendChild(styleSheetNode);
    styleSheet = styleSheetNode.sheet || styleSheetNode.styleSheet; // [IE] node.styleSheet

    // --- create Nodes and Rules ---
    for (; y < rows; ++y) {
        nodes.push([]);
        for (x = 0; x < cols; ++x) {
            id = "" + y + x;

            node = document.createElement("div");
            node.id = "node" + id;
            node.className = "move";
            nodes[y][x] = node;
            document.body.appendChild(node);

            if (styleSheet.insertRule) {
                rule = "#node@@_@@{left:@@px;top:@@px}".at(y, x, x * 50 + 100, y * 50 + 100);
                styleSheet.insertRule(rule, rules++);

//                console.log(rule);
            } else {
                styleSheet.addRule("#node@@_@@".at(y, x),
                                   "left:@@px;top:@@px".at(x * 50 + 100, y * 50 + 100));
            }
        }
    }
}

</script>
</body></html>
